<template>
	<view class="content">
		<view class="conment_wrap">
			<span @click="onLogin">登录</span>
			<view class="nav_wrap">
				<!-- 店铺 -->
				<view class="shop_wrap">
					<view class="tab-bar">
						<view v-for="(item, index) in storeForm" :key="index" class="tab-item"
							:class="{ active: currentIndex === item.id }" @tap="switchTab(item.id)">
							{{ item.title }}

							<view :class="{ bg_sty: currentIndex === item.id }"> </view>
						</view>
					</view>
				</view>
				<!-- 图标 -->
				<!-- #ifdef APP-PLUS -->
				<view @tap.stop="openAuth('CAMERA')">
					<uni-icons type="scan" size="30" class="scan_icon"></uni-icons>
				</view>
				<!-- #endif  -->

				<!-- #ifndef APP-PLUS -->
				<view>
					<uni-icons type="scan" size="30" class="scan_icon" @click="authorize"></uni-icons>
				</view>
				<!-- #endif  -->
			</view>

			<!-- 商品 -->
			<side-navigation ref="goosList" @shareGoods="onShareGoods" @grouping="onGrouping" @onAdd="onGoodAdd"
				@onItem="onItemDetail" :barlist="barlist" />
		</view>

		<!-- 购物车 -->
		<cart-model ref="GCart" :cartId="currentIndex" :userId="Info.id" @submit="onSubmit"
			@getgoods="onGetgoods"></cart-model>

		<!-- 申请入驻 -->
		<hover-menu></hover-menu>
		<permission-popup ref="authpup" type="top" @changeAuth="changeAuth"
			:permissionID="permissionID"></permission-popup>

		<!--导航栏 -->
		<tabBar selectedIndex="0"></tabBar>
	</view>
</template>

<script>
	import permissionPopup from "@/components/permission-popup/permission-popup";
	import UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
	const uniShare = new UniShare();
	// 引入分享方法
	import appShare, {
		closeShare
	} from "@/utils/share.js"
	import {
		mapState,
		mapMutations,
	} from "vuex";
	import {
		login,
		getStoreId,
		addCart,
		getCodeItem,
		inviteCode,
		getCode
	} from "@/api/apis.js";
	export default {
		components: {
			permissionPopup
		},
		data() {
			return {
				title: "Hello",
				popupShow: false,
				Allchecked: false, //默认为false
				tabs: [{
					title: "美传自营店",
					id: 1,
				}, ],
				permissionID: '',
				currentIndex: 1, // 当前激活的店铺 id
				status: 2, //未授权时
				color4: null,
				barlist: [],
				storeGoodsGroupId: 0, //当前激活的分组 id
				colorList: [],
				GlobalPopup: true,
				checkGrouping: {}, //选中分组数据、清空购物车时，重新刷新该页面
				qecodeDeta: {},
				activeKey: 0, // 当前激活的导航项的索引，0表示第一个导航项
			}
		},
		onLoad(e) {
			this.setStoreId(this.storeForm[0].id)
			this.currentIndex = this.storeForm[0].id
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
			this.onHideGCart() //返回本页时。关闭购物车
			if (this.storeForm.length == 1) {
				this.setStoreId(this.storeForm[0].id)
				this.currentIndex = this.storeForm[0].id
			}
		},

		computed: {
			...mapState("userInfo", ["Info", 'storeId', 'storeForm']),
			...mapState("copyText", ["goodsTiem"]),
			...mapState(["dynamicTabbar"]),
		},

		methods: {
			...mapMutations("userInfo", ["setToken", 'setUserInfo', 'setStoreId', 'setStoreForm']),

			// 关闭购物车
			onHideGCart() {
				this.$nextTick(() => {
					this.$refs.GCart.onHideModel()
				})
			},

			// 切换店铺
			switchTab(index) {
				this.currentIndex = index;
				this.setStoreId(index) //设置店铺
				this.getGrouping() //重新获取分组 同时更新列表
				this.$refs.GCart.onSearch() //调用购物车数量
			},

			// 登录
			onLogin() {
				let prams = {
					mobile: "16637831582",
					// mobile: '15192560785',
					// mobile: '15314231379'
					// mobile: '18653235317',
					// mobile: '18611111111',
					// mobile: '13611111111',
				};

				login(prams).then((res) => {
					if (res.success) {
						let tabs = [{
								title: "美传自营店",
								id: 1,
							},
							// 可以继续添加更多的 Tab
						]
						let userInfo = res.result.userInfo
						if (userInfo.belongStore == 1) {
							// console.log(userInfo);
							if (userInfo.storeId != 1) {
								let item = {
									title: userInfo.storeName,
									id: userInfo.storeId
								}
								tabs.unshift(item)
								uni.showToast({
									title: "绑定店铺成功",
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: "绑定官方自营店成功",
									icon: 'none'
								})
							}
						}
						this.setStoreForm(tabs)
						this.currentIndex = this.storeForm[0].id

						uni.showToast({
							title: '登录成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
						this.setToken(res.result.token);
						this.setUserInfo(res.result.userInfo);
						this.setStoreId(this.currentIndex) //
						this.getGrouping()
						this.$refs.GCart.onSearch() //调用购物车数量
					} else {
						this.$mesaage.error(res.result.message);
					}
				});
			},

			// 跳转到demo页
			onDemo() {
				uni.navigateTo({
					url: "/pages/demo/demo",
				}, );
			},

			// 重新获取一遍商品数据
			onGetgoods() {
				let params = {
					storeId: this.storeId,
					storeGoodsGroupId: this.storeGoodsGroupId,
					customerId: this.Info.id,
				}
				// this.onGrouping(params)
				this.getGrouping() //重新刷新一下商品
			},

			// 请求相机权限
			authorize() {
				// 允许从相机和相册美名传
				uni.scanCode({
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.qecodeDeta = JSON.parse(res.result)
						this.bindInviteCode() //绑定登录信息
					}
				});
			},

			//打开自定义权限目的弹框
			openAuth(permissionID) {
				if (plus.os.name == 'Android') {
					this.permissionID =
						permissionID; //这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
					setTimeout(() => {
						this.$refs['authpup'].open();
					}, 500)
				} else {
					this.authorize()
				}
			},

			//用户授权权限后的回调
			changeAuth() {
				//这里是权限通过后执行自己的代码逻辑
				console.log('权限已授权，可执行自己的代码逻辑了');
				this.authorize() //调用相册功能
			},

			// 绑定店铺信息信息
			bindInviteCode() {
				let params = {
					"inviteCode": this.qecodeDeta.invitationCode,
					"type": this.qecodeDeta.type, //邀请类型 0、用户邀请 1、店铺邀请
				}
				console.log("执行代码", params);
				inviteCode(params).then(res => {
					if (res.success) {
						let tabs = [{
								title: "美传自营店",
								id: 1,
							},
							// 可以继续添加更多的 Tab
						]
						let result = res.result
						if (result.storeId && result.storeId != null) {
							if (result.storeId != 1) {
								let item = {
									title: result.storeName,
									id: result.storeId
								}
								tabs.unshift(item)
								uni.showToast({
									title: "绑定店铺成功",
									icon: 'success'
								})
							} else {
								uni.showToast({
									title: "绑定官方自营店成功",
									icon: 'none'
								})
							}

						}

						this.setStoreForm(tabs)
						this.currentIndex = this.storeForm[0].id
					} else {
						uni.showToast({
							title: "绑定店铺失败",
							icon: 'none'
						})
					}
				}).finally(() => {
					this.onloading = false
				})
			},

			// 获取店铺下的分组
			getGrouping() {
				// this.$nextTick(() => {
				// 	this.$refs.popup.open('center')
				// })
				let params = {
					storeId: this.storeId, //默认写死1
				};

				getStoreId(params).then((res) => {
					this.barlist = res.result
					let params = {
						storeId: this.storeId,
						storeGoodsGroupId: this.storeGoodsGroupId || res.result[0].id,
						customerId: this.Info.id,
					}
					this.$refs.goosList.listInit(params)
				});
			},

			// 选中的分组
			onGrouping(item) {
				this.storeGoodsGroupId = item.id; //存储分组Id
				let params = {
					storeId: this.storeId,
					storeGoodsGroupId: item.id,
					customerId: this.Info.id,
				}

				this.checkGrouping = params //选中分组数据、清空购物车时，重新刷新该页面
				this.$refs.goosList.listInit(params)
			},

			// 点击商品增加时
			onGoodAdd(item) {
				let params = {
					"customerId": this.Info.id,
					"goodsId": item.id,
					"num": 1,
					"storeId": this.currentIndex
				}

				addCart(params).then(res => {
					if (res.success) {
						// uni.showToast({
						// 	title: '添加购物车成功',
						// 	icon: 'success',
						// 	duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
						// 	mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
						// 	// image:'./image.png',//自定义图标的本地路径
						// });
						this.$refs.GCart.onSearch()
						this.$refs.goosList.setItem(item, true)
					} else {
						// uni.showToast({
						// 	title: '获取失败',
						// 	icon: 'none',
						// 	duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
						// 	mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
						// 	// image:'./image.png',//自定义图标的本地路径
						// });
						this.$refs.goosList.setItem(item, false)
					}
				}).finally(() => {
					// this.$refs.goosList.setItem(item)
					this.$refs.goosList.setItem(item, false)
				})

			},

			onSubmit() {
				// 存储到缓存
				uni.navigateTo({
					url: "/pages/addOrder/addOrder"
				})
			},

			// 订单详情
			onItemDetail(id) {
				uni.navigateTo({
					url: `/pages/goodsdetail/goodsdetail?pkid=${id}`,
				}, );
			},

			editNum(id, type) {
				const index = this.colorList.findIndex((v) => v.id == id);
				this.colorList[index].count += type;
				// 刷新数据
				this.$forceUpdate();
			},

			// 分享商品
			onShareGoods(item) {
				let params = {
					id: item.id,
					storeId: this.storeId
				}
				getCode(params).then(res => {
					let formDate = {}
					formDate.word = res.result //口令
					formDate.Invitation = this.Info.inviteCode //邀请码
					let text = `${item.goodsName}
【到手价】${item.storePrice/100}元
-----------------
【下载APP】https://sj.mc.com/appdetail/com.jf.lkrj
【邀请码】*${formDate.Invitation}*
-----------------
复制口令，打卡美名传APP购买】
&${formDate.word}&`

					let shareData = {
						shareContent: text,
						shareImg: "http://qn.kemean.cn//upload/202004/18/1587189024467w6xj18b1.jpg",
						appId: "wxd0e0881530ee4444",
						appPath: "pages/home/home",
						type: 1,
					};

					appShare(shareData, res => {
						console.log("分享成功回调", res);
					});

					// uni.setClipboardData({
					// 	data: text,
					// 	success: function() {
					// 		uni.showToast({
					// 			title: '复制成功',
					// 			icon: 'none'
					// 		})
					// 	}
					// })
				})
			},

			// 弹出
			onCartTime() {
				getCodeItem(this.goodsTiem.word).then(res => {
					console.log(res);
				})
			},

		},
	};
</script>

<style lang="scss" scoped>
	.slot-icon {
		width: 30rpx;
	}

	.u-page__item__slot-icon {
		width: 78rpx;
	}

	// 穿透样式
	::v-deep .che_box {
		align-items: flex-start;
	}

	.content {
		height: 100%;
		width: 100%;

		.conment_wrap {
			background-color: #f4f4f4;
		}

		.nav_wrap {
			// height: 120rpx;
			background: #ffffff;
			box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.06);
			// border-radius: 0px 0px 0px 0px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 24rpx;
		}

		// tabs切换
		.shop_wrap {
			width: 100%;

			.tab-bar {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 100%;
				/* 你可以根据需求调整 */

				.tab-item {
					// width: 180px;
					margin-left: 48rpx;
					text-align: center;
					padding: 10rpx 0;
					font-size: 28rpx;
					color: #000000;
					line-height: 52rpx;
				}

				.tab-item.active {
					// color: red;
					// /* 你可以设置激活 Tab 的样式 */
					// border-bottom: 2px solid red;
					// /* 示例，你可以根据需求调整 */
					font-weight: 500;
					font-size: 36rpx;
					// width: 100%;
					color: #000000;
					line-height: 52rpx;
				}

				.bg_sty {
					width: 36rpx;
					height: 6rpx;
					background: $uni-color-theme;
					border-radius: 4rpx;
					margin: 0 auto;
				}
			}
		}

		.scan_icon {
			width: 37rpx;
			height: 37rpx;
			border-radius: 0px 0px 0px 0px;
		}

		// 结算
		.shopping {
			width: 686rpx;
			height: 92rpx;
			position: fixed;
			z-index: 10;
			// #ifdef APP-PLUS
			bottom: calc(40rpx + constant(safe-area-inset-bottom));
			bottom: calc(40rpx + env(safe-area-inset-bottom));
			// #endif

			// #ifdef H5
			bottom: calc(150rpx + constant(safe-area-inset-bottom));
			bottom: calc(150rpx + env(safe-area-inset-bottom));
			// #endif

			// bottom: constant(safe-area-inset-bottom);
			// bottom: calc(40rpx + constant(safe-area-inset-bottom));

			left: calc(50% - 343rpx);

			.shopping_title {
				font-weight: 500;
				font-size: 28rpx;
				color: #ffffff;
				text-align: left;
				font-style: normal;
				text-transform: none;
				display: flex;
				align-items: center;

				.shopping_txt {
					margin-left: 10rpx;
					font-weight: 500;
					font-size: 28rpx;
				}
			}

			.shopping_arrdess {
				width: 160rpx;
				height: 60rpx;
				background: #ffffff;
				border-radius: 36rpx;
				text-align: center;
				line-height: 60rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #444444;
			}
		}

		.shopping2 {
			height: 96rpx;
		}

		.shopping3 {
			// #ifdef APP-PLUS
			bottom: calc(0rpx + constant(safe-area-inset-bottom));
			bottom: calc(0rpx + env(safe-area-inset-bottom));
			// #endif

			// #ifdef H5
			bottom: calc(100rpx + constant(safe-area-inset-bottom));
			bottom: calc(100rpx + env(safe-area-inset-bottom));
			// #endif
		}

		.shopping_bg1 {
			width: 100%;
			height: 100%;
			border-radius: 56rpx;
			box-sizing: border-box;
			background-color: #444444;
			padding: 0 16rpx 0 28rpx;
			line-height: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.shopping_bg2 {
			width: 100%;
			height: 100%;
			border-radius: 56rpx;
			box-sizing: border-box;
			// padding-right: 20rpx;
			box-shadow: 0px 0px 24rpx 0px rgba(0, 0, 0, 0.12);
			background: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.shopping2_title {
				display: flex;
				align-items: center;
			}

			.shopping2_img {
				position: relative;
				margin-top: -22rpx;
				width: 132rpx;

				.shopping2_unm {
					position: absolute;
					top: 40rpx;
					right: -2rpx;
					width: 32rpx;
					height: 32rpx;
					font-weight: 500;
					font-size: 22rpx;
					color: #ffffff;
					line-height: 32rpx;
					text-align: center;
					background: $uni-text-color-red;
					border-radius: 50%;
				}
			}

			// 金额
			.shopping2_txt {
				margin-left: 20rpx;

				.Price_sty1 {
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					line-height: 24rpx;
				}

				.Price_sty2 {
					font-weight: bold;
					font-size: 35rpx;
					// color: #F2270C;
					color: #000000;
					margin-left: 5rpx;
					line-height: 36rpx;
				}

				.delivery {
					font-weight: 400;
					font-size: 20rpx;
					color: #808080;
					line-height: 20rpx;
					margin-top: 12rpx;
				}
			}

			// 结算
			.shopping2_arrdess {
				color: #ffffff;
				text-align: center;
				font-style: normal;
				text-transform: none;

				width: 168rpx;
				height: 96rpx;
				line-height: 96rpx;
				background: #828282;
				border-radius: 0px 60rpx 60rpx 0px;
			}

			.shopping2_arrdess_bgc {
				background: $uni-color-theme;
			}
		}

		.shopping_bg3 {
			box-shadow: 0px 0px 24rpx 0px rgba(0, 0, 0, 0.1);
			border: 1rpx solid #ccc;
		}
	}

	.popup-content {
		height: 70vh;
		background: #fff;
		padding: 24rpx;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;

		.header_title {
			display: flex;
			justify-content: space-between;

			.cart {
				font-weight: 400;
				font-size: 28rpx;
				color: #262626;
			}

			.cart_x {
				position: absolute;
				top: -10rpx;
				right: 0;
				padding: 20rpx;
				// border: 1px solid #ccc;
				font-size: 25rpx;
			}
		}

		.goods_centent {
			.header_cent {
				padding: 0 18rpx;
				margin-top: 36rpx;
				margin-bottom: 36rpx;
				display: flex;
				justify-content: space-between;

				// 店铺图标
				.cart_icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 4rpx;
				}

				.header_del {
					padding: 0 20rpx;
					// border: 1px solid #ccc;
					color: #898989;
					font-weight: 400;
					font-size: 20rpx;
					display: flex;
					align-items: center;
				}
			}

			.cart_page {
				width: 100%;
				height: 100%;
				min-height: 100vh;
				background-color: #f2f2f2;
				overflow: auto;
			}

			.bottom {
				position: fixed;
				bottom: 0;
				left: 0;
				height: 100rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 0 25rpx;
				background-color: #ffffff;
				border-top: #cccccc;
				box-shadow: 0 0 12rpx #f1f1f1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.totalPrice {
						color: #666666;
						font-size: 28rpx;

						text {
							color: #0ca8e1;
							font-size: 32rpx;
						}
					}
				}

				.submitOrder {
					width: 200rpx;
					border-radius: 70rpx;
					height: 70rpx;
					line-height: 70rpx;
					color: #ffffff;
					text-align: center;
					font-size: 28rpx;
					background-color: #0ca8e1;
				}
			}

			.list {
				padding: 36rpx 28rpx;
				height: 800rpx;
				overflow-y: auto;



				.che_box {
					display: flex;

					// 容器
					.cart_box {
						margin-left: 30rpx;
						width: -webkit-fill-available;
						// margin-bottom: 48rpx;
						padding-bottom: 32rpx;
						border-bottom: 2rpx solid #f2f2f2;

						display: flex;

						.cb_img {
							width: 112rpx;
							height: 112rpx;
							border-radius: 8rpx;

							.cb_img_sty {
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
							}
						}

						.cb_flex {
							display: flex;
							justify-content: space-between;

							.cb_price {}

							.cb_price_totole {
								display: flex;
								justify-content: space-around;
								align-items: center;

								.num {
									margin: 0 18rpx;
								}

								.cart_icon {
									width: 32rpx;
									height: 32rpx;
								}
							}
						}
					}

					// 文本容器
					.cb_box {
						margin-left: 20rpx;
						flex: 1;

						.cb_title {
							font-weight: 400;
							font-size: 28rpx;
							color: #262626;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						.cb_flex {
							margin-top: 32rpx;
						}
					}
				}
			}

			.number {
				text {
					width: 50rpx;
					line-height: 50rpx;
					text-align: center;
					display: inline-block;
					background-color: #f1f1f1;
					margin-right: 5rpx;
				}

				.add {
					color: #0ca8e1;
					margin-right: 20rpx;
				}

				.num {
					color: #666666;
					width: 70rpx;
				}
			}
		}
	}

	::v-deep .che_box {
		align-items: flex-start;
	}

	.authItem {
		border: solid 2rpx #f5f5f5;
		width: 705rpx;
		margin: 32rpx 22.5rpx 0 22.5rpx;
		padding: 24rpx;
		border-radius: 12rpx;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		/* #endif */
		color: #666;
		text-align: center;
		background: #fff;
	}
</style>